import React from 'react';
import {
  StyleSheet, View, Text,
} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import { FormText, CheckBoxBlack, FormInputBlack } from '../../../../components';

const InfoItem = ({
  datas, del, onCheckChange, _onChangeText,
}) => (
  <View style={styles.container}>
    {datas && datas.length > 0 && (
      datas.map((data, index) => (
        <View style={styles.itemContainer} key={index}>
          <FormText name="名称" value={`${data.materialName}（${data.pc.length}）`} fontColor="black" />
          <FormText name="物料编码" value={data.materialCode1} fontColor="black" />
          <FormText name="型号" value={data.materialSpecModel} fontColor="black" />
          <FormText name="供应商" value={data.supplierName} fontColor="black" />
          <FormText name="包装单位" value={data.packageUnit} fontColor="black" />
          <FormText name="备件批次码" fontColor="black" />
          {
            data.pc.map((mdata, mindex) => (
              <View style={{ flexDirection: 'column', padding: 8 }}>
                <View style={styles.pcContainer} key={mindex}>
                  <Text>{mdata.name}</Text>
                  <Icon
                    name="closecircle"
                    size={22}
                    color="#a4a4a4"
                    onPress={() => del(index, mindex)}
                  />
                </View>
                {data.showSplitBtn && (
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Text style={{ color: 'black', marginRight: 8 }}>是否拆分</Text>
                    <CheckBoxBlack
                      style={styles.checkBox}
                      checked={mdata.splitFlag}
                      onCheckChange={(splitFlag) => onCheckChange(index, mindex, splitFlag)}
                    />
                  </View>
                )}
                { data.showSplitBtn && mdata.splitFlag && (
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Text>库存量{mdata.allNum} {data.consumeUnit}，出库</Text>
                    <FormInputBlack
                      placeholder=""
                      keyboardType="numeric"
                      value={mdata.num}
                      _onChangeText={(text) => _onChangeText(index, mindex, text)}
                    />
                    <Text> {data.consumeUnit}</Text>
                  </View>
                )}
              </View>
            ))
          }
        </View>
      ))
    )}
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 8,
  },
  itemContainer: {
    backgroundColor: 'white',
    borderRadius: 8,
    marginLeft: 8,
    marginRight: 8,
    marginTop: 8,
    padding: 8,
  },
  pcContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  checkBox: {
    width: 20,
    height: 20,
    borderColor: '#ffffff',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 5,
  },
});

export default InfoItem;
